﻿@page "/answerpage"
@using ELS.Models
@using ELS.Services
@inject IAccountService AccountService
@inject NavigationManager NavigationManager

@if (AccountService.User == null)
{
	<MudAlert Severity="Severity.Error">
		您为未登录状态，请先登录！
	</MudAlert>
	<MudButton Class="mt-4" Variant="Variant.Filled" Color="Color.Primary" Href="/account/login">登录</MudButton>
	return;
}

@if (isShowInitial)
{
	<MudGrid Spacing="4" Justify="Justify.Center">
		<MudItem xs="12" sm="8">
			<MudPaper Class="pa-4" Style="height:30vh;justify-content:center;align-items:center">
				<br />
				<br />
				<br />
				<MudText Typo="Typo.h4" Align="Align.Center">准备好了吗？</MudText>
				<MudText Typo="Typo.h5" Align="Align.Center">点击下面开始按钮开始答题吧！</MudText>
			</MudPaper>
		</MudItem>
		<MudFlexBreak />
		<MudItem xs="12" sm="8">
			<MudPaper Class="pa-4" Style="height:10vh;display:flex;justify-content:center;align-items:center">
				<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="StartAnswer">开始答题</MudButton>
			</MudPaper>
		</MudItem>
	</MudGrid>
}
else
{
	if (!isShowAnswer)
	{
		<MudGrid Spacing="4" Justify="Justify.Center">
			<MudItem xs="12" sm="10">
				<MudPaper Class="pa-8" Style="height:30vh;display:flex;justify-content:left;align-items:center">
					<MudText Typo="Typo.h5" Align="Align.Center">@(currentQuestion.Index + ". " + currentQuestion.Title)</MudText>
				</MudPaper>
			</MudItem>
			<MudFlexBreak />
			<MudItem xs="12" sm="10">
				<MudPaper Class="pa-8">
					<MudRadioGroup T="int" @bind-Value="@SelectedAnswer">
						<MudRadio Value="1" Color="Color.Primary">
							@("A." + currentQuestion.Answer1)
						</MudRadio>
						<br />
						<MudRadio Value="2" Color="Color.Primary">
							@("B." + currentQuestion.Answer2)
						</MudRadio>
						<br />

						<MudRadio Value="3" Color="Color.Primary">
							@("C." + currentQuestion.Answer3)
						</MudRadio>
						<br />

						<MudRadio Value="4" Color="Color.Primary">
							@("D." + currentQuestion.Answer4)
						</MudRadio>
					</MudRadioGroup>
				</MudPaper>
			</MudItem>

			<MudItem xs="12" sm="10">
				<div style="display:flex;justify-content:center;align-items:center">
					<MudButton Variant="Variant.Outlined" Color="Color.Primary" @onclick="PreviousQuestion">上一题</MudButton>
					<MudButton Style="margin-left:20px;" Variant="Variant.Filled" Color="Color.Primary" @onclick="NextQuestion">下一题</MudButton>
				</div>
			</MudItem>
		</MudGrid>
	}
	else // 显示答案
	{
		<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-4">答案</MudText>
		<MudGrid Spacing="4" Justify="Justify.Center">
			<MudItem xs="12" sm="10">
				<MudChart ChartType="ChartType.Donut" LegendPosition="Position.Bottom" Width="200px" Height="200px"
						  InputData="@data" InputLabels="@labels">
				</MudChart>

				<MudAlert Severity="Severity.Info">
					@("答对" + questionList.Count(q => q.UserAnswerIndex == q.CurentAnswerIndex) + "题，答错" + questionList.Count(q => q.UserAnswerIndex != q.CurentAnswerIndex) + "题")
				</MudAlert>
			</MudItem>
			<MudItem xs="12" sm="10">
				<MudDataGrid Items="@questionList" ReadOnly="true" EditMode="@DataGridEditMode.Cell">
					<Columns>
						<HierarchyColumn T="Question" />
						<PropertyColumn Property="x => x.Index" Title="序号" HeaderStyle="width:100px" Sortable="false" />
						<PropertyColumn Property="x => x.Title" Title="题目" Sortable="false" />
						<PropertyColumn Property="x => ConvertAnswer(x.CurentAnswerIndex)" Title="正确答案" Sortable="false" HeaderStyle="width:100px" />
						<PropertyColumn Property="x => ConvertAnswer(x.UserAnswerIndex)" Title="用户答案" Sortable="false" HeaderStyle="width:100px" />
						<PropertyColumn Property="x => (x.CurentAnswerIndex == x.UserAnswerIndex ? '√' : '×')"
										Title="结果" Sortable="false" HeaderStyle="width:100px" />
					</Columns>
					<ChildRowContent>
						<MudCardHeader>
							<CardHeaderContent>
								<MudIcon Icon="@(context.Item.CurentAnswerIndex == context.Item.UserAnswerIndex ? Icons.Material.Filled.Check : Icons.Material.Filled.Close)"
										 Color="@(context.Item.CurentAnswerIndex == context.Item.UserAnswerIndex ? Color.Success : Color.Error)" Size="Size.Large" />
								<MudText>@context.Item.Title</MudText>
							</CardHeaderContent>
						</MudCardHeader>
						<MudCardContent>
							<MudStack Row="true">
								<MudText>@("A." + context.Item.Answer1)</MudText>
								<MudText>@("B." + context.Item.Answer2)</MudText>
								<MudText>@("C." + context.Item.Answer3)</MudText>
								<MudText>@("D." + context.Item.Answer4)</MudText>
							</MudStack>
						</MudCardContent>
					</ChildRowContent>
				</MudDataGrid>
			</MudItem>

			<MudItem xs="12" sm="10">
				<MudPaper Class="pa-8" Style="height:10vh;display:flex;justify-content:center;align-items:center">
					<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="StartAnswer">重新答题</MudButton>
				</MudPaper>
			</MudItem>
		</MudGrid>
	}
}

@code {

}
